<!--统计分析-->
<template>
  <div class="statistical-analysis">
    <div class="statistical-content">
      <a-row :gutter="20">
        <a-col
          :span="6"
          v-for="(item, index) in statisticalList"
          :key="index">
          <div class="statistical-box">
            <div class="statistical-message">
              <div class="statistical-num">{{ item.num }}</div>
              <div class="statistical-title">{{ item.title }}</div>
            </div>
            <div class="statistical-img">
              <icon-font :type="item.icon" />
            </div>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="20">
        <a-col :span="12">
          <div class="statistical-chart">
            <charts-one></charts-one>
          </div>
        </a-col>
        <a-col :span="12">
          <div class="statistical-chart">
            <charts-two></charts-two>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="20">
        <a-col :span="12">
          <div class="statistical-chart">
            <charts-three></charts-three>
          </div>
        </a-col>
        <a-col :span="12">
          <div class="statistical-chart">
            <charts-four></charts-four>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <div class="statistical-table">
            <tables-one></tables-one>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <div class="statistical-chart">
            <charts-five></charts-five>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="20">
        <a-col :span="8">
          <div class="statistical-chart">
            <charts-six></charts-six>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="statistical-chart">
            <charts-seven></charts-seven>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="statistical-chart">
            <charts-eight></charts-eight>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { ChartsOne, ChartsTwo, ChartsThree, ChartsFour, ChartsFive, ChartsSix, ChartsSeven, ChartsEight, TablesOne } from './components'
export default {
  name: '',
  components: {
    ChartsOne,
    ChartsTwo,
    ChartsThree,
    ChartsFour,
    ChartsFive,
    ChartsSix,
    ChartsSeven,
    ChartsEight,
    TablesOne
  },
  data () {
    return {
      statisticalList: [
        {
          num: '$8,457',
          title: 'Amount Due',
          icon: 'icon-huishouzhan'
        },
        {
          num: '$19,627',
          title: 'Total Income',
          icon: 'icon-shezhi'
        },
        {
          num: '$238,232',
          title: 'New Users',
          icon: 'icon-bangzhu'
        },
        {
          num: '$18,68',
          title: 'Bounce rate',
          icon: 'icon-sousuo1'
        }
      ]
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
.statistical-analysis {
  width: 100%;
  min-height: 100%;
  .statistical-content {
    padding: 20px;
    .ant-row {
      margin-bottom: 20px;
      .ant-col-6 {
        .statistical-box {
          height: 120px;
          border-radius: 6px;
          transition: all .8s ease;
          border: 1px solid #ceddee;
          padding: 0 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .statistical-message {
            .statistical-num {
              color: #ffffff;
              font-weight: 700;
              font-size: 24px;
              line-height: 40px;
            }
            .statistical-title {
              color: #ffffff;
              font-size: 14px;
              line-height: 20px;
            }
          }
          .statistical-img {
            width: 50px;
            height: 50px;
            .anticon {
              color: #FFF;
              font-size: 50px;
            }
          }
          &:hover {
            box-shadow: 0 1px 20px rgba(33,33,33,.2);
          }
        }
        &:nth-child(1) {
          .statistical-box {
            background-image: linear-gradient( 135deg, #ABDCFF 10%, #0396FF 100%);
          }
        }
        &:nth-child(2) {
          .statistical-box {
            background-image: linear-gradient( 135deg, #2AFADF 10%, #4C83FF 100%);
          }
        }
        &:nth-child(3) {
          .statistical-box {
            background-image: linear-gradient( 135deg, #FFD3A5 10%, #FD6585 100%);
          }
        }
        &:nth-child(4) {
          .statistical-box {
            background-image: linear-gradient( 135deg, #EE9AE5 10%, #5961F9 100%);
          }
        }
      }
      .statistical-chart {
        height: 400px;
        background: #FFF;
        border: 1px solid #ceddee;
        padding: 20px;
        transition: all 0.8s ease;
        &:hover {
          box-shadow: 0 1px 20px rgba(33,33,33,.2);
        }
      }
      .statistical-table {
        height: 400px;
        background: #FFF;
        border: 1px solid #ceddee;
        padding: 20px;
        transition: all 0.8s ease;
        &:hover {
          box-shadow: 0 1px 20px rgba(33,33,33,.2);
        }
      }
    }
  }
}
</style>
